<template>
  <div>
    <div style="width: 1000px; margin: 20px">
      <wangeditor
        ref="wangeditor"
        :isSeparateHeadBody="false"
        @callbackPasteTextHandleEditor="pasteTextHandleEditor"
        @callbackChangeEditor="changeEditor"
        @callbackFocusEditor="focusEditor"
        @callbackBlurEditor="blurEditor"
      >
      </wangeditor>
      <div class="mt20">
        <vue-tree
          ref="dialogTreeRef"
          :isShow="configDefault.isShow"
          :customData="configDefault.options"
          :nodeKey="configDefault.props.value"
          :defaultcheckedKeys="configDefault.selectModel"
          @callbackNodeClick="clickCTreeNode"
          @callbackCheck="checkTreeNode"
        ></vue-tree>
        <vueButton
        ref="vueButtonRef"
          :isCustomData="true"
          :customData="customData"
          @buttonCallback="buttonClick"
        ></vueButton>
      </div>
    </div>
  </div>
</template>

<script>
import wangeditor from "@/components/wangeditor/wangeditor.vue";
import vueTree from "@/components/vueTree/vueTree.vue";
import vueButton from "@/components/vueButton/button";
export default {
  name: "default",
  components: {
    wangeditor,
    vueTree,
    vueButton,
  },
  data() {
    return {
      customData: [
        {
          name: "提交",
          action: "submit",
          isVisiable: true,
        },
          {
          name: "重置",
          action: "reset",
          isVisiable: true,
        },
      ],
      configDefault: {
        clearable: true,
        props: {
          label: "label",
          value: "id",
        },
        options: [
          {
            id: 1,
            label: "一级 1",
            children: [
              {
                id: 4,
                label: "二级 1-1",
                children: [
                  {
                    id: 9,
                    label: "三级 1-1-1",
                  },
                  {
                    id: 10,
                    label: "三级 1-1-2",
                  },
                ],
              },
            ],
          },
          {
            id: 2,
            label: "一级 2",
            children: [
              {
                id: 5,
                label: "二级 2-1",
              },
              {
                id: 6,
                label: "二级 2-2",
              },
            ],
          },
          {
            id: 3,
            label: "一级 3",
            children: [
              {
                id: 7,
                label: "二级 3-1",
              },
              {
                id: 8,
                label: "二级 3-2",
              },
            ],
          },
        ],
        isShow: true,
        multiple: true,
        selectModel: [5,9],
      },
    };
  },
  created() {},
  methods: {
    pasteTextHandleEditor(content) {
      // console.log("pasteTextHandleEditor", content);
    },
    changeEditor(html) {
      // console.log("changeEditor", html);
    },
    focusEditor() {
      // console.log("focusEditor");
    },
    blurEditor(html) {
      console.log("blurEditor");
    },
    clickCTreeNode(data, Node, tree) {
      let currentObj = data;
      if (!this.multiple) {
        this.showLabelModel = data[this.configDefault.props.label];
        this.childModel = data[this.configDefault.props.value];
      }
    },
    checkTreeNode(data, checkedNodeObj) {
      let currentObj = checkedNodeObj.checkedNodes;
      if (this.multiple) {
        this.showLabelModel = "";
        this.childModel = checkedNodeObj.checkedKeys;
        currentObj.forEach((item) => {
          this.showLabelModel += item[this.configDefault.props.label] + ",";
        });
        this.showLabelModel = this.showLabelModel
          ? this.showLabelModel.substring(0, this.showLabelModel.length - 1)
          : "";
      }
    },
    buttonClick(key, btnItem) {
      if (btnItem.action == "submit") {
        this.$refs.vueButtonRef.disableOrEnableBtn(true,"reset")
        let a= this.$refs.dialogTreeRef.getCheckedKeys();
        let b= this.$refs.dialogTreeRef.getCheckedNodes();
        let c= this.$refs.dialogTreeRef.getHalfCheckedKeys();
        let d= this.$refs.dialogTreeRef.getHalfCheckedNodes();
        let e= this.$refs.dialogTreeRef.getCurrentKey();
        // console.log(
        //   "key, btnItem===",
        //   key,
        //   btnItem,
        //   a,b,c,d
        // );
      }
    },
  },
};
</script>

<style>
</style>
